<template>
    <div class="item">
        <span class="key">{{ props.label }}</span>
        <span class="value" v-if="!props.isImg" style="border: 1px solid #999">
            <slot>{{ props.value }}</slot>
        </span>
        <span class="value" v-else>
            <slot>{{ props.value }}</slot>
        </span>
    </div>
</template>

<script setup>
import { defineProps } from 'vue';

const props = defineProps(['label', 'value', 'isImg']);
</script>

<style scoped lang="scss">
.item {
    margin-top: 20rem;
    width: 80%;
    height: 4%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .key {
        flex: 4;
        display: flex;
        justify-content: end;
        align-items: center;
        margin-right: 10rem;
    }
    .value {
        flex: 6;
        height: 100%;
        border-radius: 3rem;
        display: flex;
        align-items: center;
        color: #555;
        & {
            padding-left: 10rem;
            padding-right: 10rem;
        }
    }
}
</style>
